<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <title>Document</title>
</head>
<style>
    .list .active {
        background: #C28C93;
    }

    .list li {
        line-height: 32px;
        margin-top: 10px;
    }
</style>

<body>
    <div id="wrap">
        <h2>jQuery属性</h2>
        <div class="list">
            <li>00</li>
            <li class="first">01</li>
            <li>02</li>
            <li>03</li>
            <li class="mid">周宇</li>
            <li>05</li>
            <li class="last"><span>06</span></li>
        </div>
    </div>
</body>
<script>
    // attr()  获取和设置html属性(属性节点)
    // attr(key,val) 设置
    // attr(key) 获取 
    $(".list li").attr("asd", "asd");
    console.log($(".list li").attr("asd"));


    // removeAttr(key)  根据键名删除属性
    $(".list li").removeAttr("asd");
    console.log($(".list li").attr("asd"));


    // prop()  获取和设置元素节点的属性
    // prop(key,val) 设置
    // prop(key) 获取 
    $(".list li").prop("className", "zhou");
    console.log($(".list li").prop("className"));  //原来的属性会被覆盖

    // 一般利用addClass添加属性
    $(".list li").addClass("yu");
    console.log($(".list li").prop("className"));


    // removeProp(key)  根据键名删除属性(删除元素固有属性时,会显示undefined)
    $(".list li").removeProp("zhou");
    console.log($(".list li").prop("zhou"));


    // toggleClass  对设置或移除被选元素的一个或多个类进行切换
    $(".list li").click(function () {
        $(this).toggleClass("active")
    })
</script>

</html>